<template>
  <div :class="[type?'footer footer-login':'footer',vipState]">
    <div class="bg-white">
      <div class="layout-main foot-main">
        <ul class="yh-layout-box foot-list">
          <li v-for="i in list">
            <div class="icon">
              <img class="max" :src="i.icon">
            </div>
            <div class="text">
              <h3>{{ i.name }}</h3>
              <p>{{ i.subtitle }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="menus">
        <div class="yh-layout-box">
          <div class="services fl" v-for="item in services">
            <div class="services-title">
              <i> <img :src="item.icon" alt=""> </i>
              <span>{{ item.name }}</span>
            </div>
            <ul>
              <li v-for="subItem in item.list">
                <span class="cursor" v-if="!subItem.open && subItem.name == '登录' && getUserInfo()" @click="ElNote('您已登录')">
                  {{ subItem.name }}
                 </span>
                <a v-else @click="routeToPath(subItem.url,'mall', 'new')">{{ subItem.name }}</a>
                <router-link v-if="subItem.name2" :to="subItem.url2">/ {{ subItem.name2 }}</router-link>
              </li>
            </ul>
          </div>
          <div class="qrcodes fl">
            <div class="qrcode-item fl">
              <div class="qrcode-image">
                <img src="~assets/images/layouts/footbars/apps.png" alt="">
              </div>
              <div class="qrcode-text tcenter font-white">
                下载APP
              </div>
            </div>
            <div class="qrcode-item fl">
              <div class="qrcode-image">
                <img src="~assets/images/layouts/footbars/xcx.png" alt="">
              </div>
              <div class="qrcode-text tcenter font-white">
                小程序
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="record">
      Youboy 粤B2-20120239 粤ICP备09180448号-1 粤公网安备44060402000131号
    </div>
  </div>
</template>

<script>
export default {
  props: ['type', 'vipState'],
  data() {
    return {
      services: [{
        name: '帮助中心',
        type: 'help',
        icon: require('@/assets/images/layouts/footbars/s1.png'),
        list: [{
          name: '注册登录',
          url: '/help/detail?active=1-5&Id=1131736785387528192',
        },{
          name: '忘记密码',
          url: '/help/detail?active=1-2&Id=1125695049364152320',
        },{
          name: '实名认证',
          url: '/help/detail?active=1-6&Id=1131761089923784704',
        },{
          name: '用户协议',
          url: '/help/detail?active=4-0&Id=1127108223510519808',
        }]
      },{
        name: '在线交易',
        type: 'deal',
        icon: require('@/assets/images/layouts/footbars/s2.png'),
        list: [{
            name: '购物流程',
            url: '/help/detail?active=1-0&Id=1099917329250394112',
          },{
            name: '发票问题',
            url: '/help/detail?active=2-0&Id=1099917429934661632',
          },{
            name: '支付方式',
            url: '/help/detail?active=1-7&Id=1131836586825359360',
          },{
            name: '确认收货',
            url: '/help/detail?active=1-8&Id=1131854119469064192',
          }]
        },
        {
          name: '招商热线',
          type: 'hotline',
          icon: require('@/assets/images/layouts/footbars/s3.png'),
          list: [{
            name: '020-28955054',
            url: '',
          }]
        },
        {
          name: '关于我们',
          type: 'about',
          icon: require('@/assets/images/layouts/footbars/s4.png'),
          list: [{
            name: '走进一呼百应',
            url: '/about',
            open: 'new',
        }]
      }],
      list: [{
        name: '交易安全',
        subtitle: '银行监管，全程保障交易资金安全',
        icon: require('@/assets/images/enter/1.png'),
      },{
        name: '品类齐全',
        subtitle: '工业品类商品应有尽有',
        icon: require('@/assets/images/enter/2.png'),
      },{
        name: '周边市场',
        subtitle: '足不出户，便可逛批发市场',
        icon: require('@/assets/images/enter/3.png'),
      },{
        name: '实名商家',
        subtitle: '官方严格把关，核实身份，审核资质',
        icon: require('@/assets/images/enter/4.png'),
      }]
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.footer{
  background-color: #fff;
  /*margin-top: 10px;*/
  box-shadow: 12px 0 12px #ddd;
  border-top: 1px solid #eee;
  width: 100%;
  min-width: 1200px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.foot-main{
  overflow: hidden;
  padding: 20px 0;
  li{
    float: left;
    width: 286px;
    margin-left: 18px;
    .icon{
      float: left;
      width: 56px;
    }
    .text{
      float: left;
      margin-left: 10px;
      h3{
        font-size: 18px;
        padding-top: 4px;
        color: #333;
        margin: 0;
      }
      p{
        font-size: 13px;
        color: #666;
        margin-bottom: 0;
      }
    }
  }
  li:nth-child(1){
    margin-left: 0;
  }
}
.menus{
  background-color: #255B8B;
  height: 200px;
  overflow: hidden;
  width: 100%;
  .services{
    padding-top: 40px;
    color: #fff;
    overflow: hidden;
    margin-right: 80px;
    ul{
      overflow: hidden;
    }
    ul > li{
      margin-left: 27px;
      color: #ddd;
      font-size: 12px;
      line-height: 27px;
      .el-button{
        border: none;
      }
      a{
        color: #eee;
        text-decoration: none;
        &:hover{
          color: #ddd;
        }
      }
    }
  }
  .services-title{
    font-size: 16px;
    margin-bottom: 13px;
    span{
      padding-left: 10px;
    }
    i img{
      vertical-align: middle;
      margin-top: -4px;
    }
  }
  .qrcodes{
    padding-top: 40px;
    margin-left: 20px;
    .qrcode-item{
      padding-left: 100px;
      .qrcode-text{
        margin-top: 10px;
      }
    }
    .qrcode-item:nth-child(1){
      border-left: 1px solid #fff;
    }
  }
}
.record{
  text-align: center;
  line-height: 50px;
  color: #DDDDDD;
  font-size: 12px;
  background: #184B79;
}
.footer-login{
  margin-top: 0;
  box-shadow: none;
  .foot-main{
    padding: 40px 0;
  }
  .menus{
    display: none;
  }
  .record{
    background-color: #fff;
    color: #888888;
    border-top: 1px solid #EEEEEE;
    line-height: 100px;
  }
}
  /*VIP2*/
  .VIP2 .bg-white{background:#181818;}
  .VIP2 .foot-main{border-bottom:1px solid #a1a1a1;}
  .VIP2 .foot-main li .text h3{color:#fff;}
  .VIP2 .foot-main li .text p{color:#fff;}
  .VIP2 .menus{background:#181818;}
  .VIP2 .record{background:#000;}
</style>
